{% extends "base.html" %}

{% block firstColumn %}
	
	<!-- Primary content start -->
	<div id="menu">
        <a style="cursor: pointer;" id="addLink">
        <span>Add spent</span>
        </a> 
   </div>
	   
   <div style="width: 800px; float: left; text-align: left;">
    <div id="add" style="border: 1px solid green; margin-top: 5px;
    	padding: 5px;">
    </div>
    <script type="text/javascript">
        $("#add").load("/cassaco/spent/new");
  		$("#add").hide();
    </script>
        
    <div id="spentList" style="width: 800px; margin-top: 10px;">
	</div>
	<script type="text/javascript">
	    //This is the default listing (at first page visit)
	    $("#spentList").load("/cassaco/spent/list/{{page}}");
	</script>
	</div>
	<!-- Primary content end -->
{% endblock %}

{% block secondColumn %}
	<!-- Secondary content start -->
	<!--
	<div id="calendar" style="margin-left: 10px; height: 200px"></div>
	<script type="text/javascript">
	   	$("#calendar").datepicker({onSelect: function(date) { 
	   		$("#spentList").load('/cassaco/spent/list/1/' + date);},
	  			dateFormat: 'yy-mm-dd'});
	       /*$("#nav").load("/cassaco/util/getCategoriesAndSubcategoriesHTML/");*/
	   </script>
	-->
	<!-- Secondary content end -->
{% endblock %}